<template>
    <view class="content">
		<view class="privacy-pop">
		    <view class="privacy-pop-box">
		        <!-- <view class="close-01">
		            <u-icon name="close-circle" size="50" @click="show = false"></u-icon>
		        </view> -->
		        <view class="p-item">
					<view class="p-item-l">付款方式</view>
					<view class="p-item-r" @click="show = true">
						<view class="p-inp">{{ type }}</view>
						<!-- <input type="text" v-model="type" placeholder="请选择" class="p-inp" disabled> -->
						<u-icon name="arrow-down-fill" color="#575757" size="20" v-if="!disabled"></u-icon>
					</view>
				</view>
				<view class="p-item">
					<view class="p-item-l">运费</view>
					<view class="p-item-r2">￥{{data.order_amount}}</view>
				</view>
				
				<!-- 抹零权限 authority_zero=1有 0无 -->
				<view class="p-item" v-if="data.authority_zero == 1 && typeId != 2">
					<view class="p-item-l">抹零</view>
					<view class="u-flex u-flex-1">
						<input type="digit" v-model="zero" placeholder="请输入" class="p-inp2" :disabled="disabled">
						<view class="queding" v-if="!disabled" @click="confirm">确定</view>
					</view>
				</view>
				<view class="p-item">
					<view class="p-item-l">实收</view>
					<view class="p-item-r2">
						<text v-if="money > 0">￥{{ money }}</text>
					</view>
				</view>
				<image :src="data.qrcode_img" class="qr" @click="$previewImageSA(data.qrcode_img)" v-if="typeId == 1"></image>
				
		        <view class="btn-text2" v-if="!disabled" @click.stop="$noMultipleClicks(doSubmit)">确定</view>
		    </view>
		</view>
		
		<!-- 付款方式 -->
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirmType"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
				disabled: false,
                order_id: '',
				data: {},
				zero: 0,//抹零
				money: 0,
				show: false,
				typeId: 1,//1扫码 2未支付 3现金
				type: '扫码',
				list: [{value: '1',label: '扫码'},{value: '2',label: '未支付'},{value: '3',label: '现金'}],
            };
        },
        onLoad(option) {
            this.order_id = option.order_id
			this.getData()
        },
        methods: {
			doSubmit() {
				if (this.typeId != 2) {
					this.$ajax('unload_payment_confirm', {
						user_token: this.$getSync('userToken'),
						order_id: this.order_id,//运单id
						zero_amount: this.zero,//抹零金额
						method: this.typeId,//1扫码 3现金
					}).then(ret => {
						if (ret.success == 1) {
							this.disabled = true
						} else {
							this.$toast(ret.msg);
						}
					});
				} else {
					// uni.$emit('UNLOAD_BACK')
					uni.navigateBack({
						delta: 2
					})
				}
			},
			
			// 确定抹零
			confirm() {
				let max = Number(this.data.zero_amount)
				if (this.zero > max) {
					this.$toast(`抹零金额不能大于${max}元`)
					this.zero = 0
					return
				} else {
					this.money = Number(this.data.order_amount) - this.zero
				}
			},
			
			confirmType(e) {
				console.log(e);
				this.typeId = e[0].value
				this.type = e[0].label
			},
			
            getData() {
            	this.$ajax('unload_payment', {
            		user_token: this.$getSync('userToken'),
            		order_id: this.order_id,//运单id
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail
						this.money = this.data.order_amount
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
	
	
	
	
    page{
        background-color: #fff;
    }
	.privacy-pop {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 100%;
		position: relative;
	}
	.privacy-pop-box {
	    width: 700rpx;
	    padding: 20rpx;
	    background-color: #fff;
	    box-sizing: border-box;
	    border-radius: 20rpx;
	    
	}
	.close{
		width: 74rpx;
		height: 74rpx;
		position: absolute;
		left: 50%;
		bottom: 140rpx;
		transform: translateX(-50%);
	}
	.close-01{
	    position: absolute;
	    right: 20rpx;
	    top: 20rpx;
	}
	.p-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25rpx;
	}
	.p-item-l{
		width: 150rpx;
		color: #737373;
	}
	.p-item-r2{
		flex: 1;
		padding: 15rpx;
		// margin-left: 15rpx;
	}
	.p-item-r2>text{
		color: #f62a2a;
	}
	.p-item-r{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f6fa;
		border-radius: 10rpx;
		padding: 15rpx;
		// margin-left: 15rpx;
	}
	.p-inp2{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f6fa;
		border-radius: 10rpx;
		padding: 0 15rpx;
		// margin-left: 15rpx;
		height: 75rpx;
	}
	.p-inp{
		flex: 1;
	}
	.qr{
		width: 315rpx;
		height: 315rpx;
		margin: auto;
	}
	
	.btn-text2{
	    font-size: 30rpx;
	    color: #fff;
	    background-color: #00457f;
	    padding: 20rpx 50rpx;
	    border-radius: 20rpx;
	    margin: 50rpx 20rpx;
	    text-align: center;
	}
	
	.queding{
		font-size: 30rpx;
		color: #fff;
		background-color: #00457f;
		padding: 15rpx 50rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		text-align: center;
	}

</style>
